<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
  <base href="${pageContext.request.contextPath}/">

  <meta charset="UTF-8">
  <link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 创建角色的模态窗口 -->
<div class="modal fade" id="createRoleModal" role="dialog">
  <div class="modal-dialog" role="document" style="width: 80%;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">新增角色</h4>
      </div>
      <div class="modal-body">

        <form class="form-horizontal" role="form">

          <div class="form-group">
            <label for="create-roleCode" class="col-sm-2 control-label">代码<span style="font-size: 15px; color: red;">*</span></label>
            <div class="col-sm-10" style="width: 300px;">
              <input type="text" class="form-control" id="create-roleCode" style="width: 200%;">
            </div>
          </div>

          <div class="form-group">
            <label for="create-roleName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
            <div class="col-sm-10" style="width: 300px;">
              <input type="text" class="form-control" id="create-roleName" style="width: 200%;">
            </div>
          </div>

          <div class="form-group">
            <label for="create-describe" class="col-sm-2 control-label">描述</label>
            <div class="col-sm-10" style="width: 65%;">
              <textarea class="form-control" rows="3" id="create-describe"></textarea>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
      </div>
    </div>
  </div>
</div>


<div>
  <div style="position: relative; left: 30px; top: -10px;">
    <div class="page-header">
      <h3>角色列表</h3>
    </div>
  </div>
</div>
<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;left: 30px;">
  <div class="btn-group" style="position: relative; top: 18%;">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createRoleModal"><span class="glyphicon glyphicon-plus"></span> 创建</button>
    <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
  </div>
</div>
<div style="position: relative; left: 30px; top: 20px;">
  <table class="table table-hover">
    <thead>
    <tr style="color: #B3B3B3;">
      <td><input type="checkbox" /></td>
      <td>序号</td>
      <td>代码</td>
      <td>名称</td>
      <td>描述</td>
    </tr>
    </thead>
    <tbody>
    <tr class="active">
      <td><input type="checkbox" /></td>
      <td>1</td>
      <td><a href="detail.html" style="text-decoration: none;">001</a></td>
      <td>管理员</td>
      <td>管理员为最高角色，拥有所有许可</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>2</td>
      <td><a href="detail.html" style="text-decoration: none;">002</a></td>
      <td>销售总监</td>
      <td>销售总监销售总监销售总监销售总监销售总监</td>
    </tr>
    <tr class="active">
      <td><input type="checkbox" /></td>
      <td>3</td>
      <td><a href="detail.html" style="text-decoration: none;">003</a></td>
      <td>市场总监</td>
      <td>市场总监市场总监市场总监市场总监</td>
    </tr>
    </tbody>
  </table>
</div>

<div style="height: 50px; position: relative;top: 30px; left: 30px;">
  <div>
    <button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>
  </div>
  <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
    <button type="button" class="btn btn-default" style="cursor: default;">显示</button>
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        10
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">20</a></li>
        <li><a href="#">30</a></li>
      </ul>
    </div>
    <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
  </div>
  <div style="position: relative;top: -88px; left: 285px;">
    <nav>
      <ul class="pagination">
        <li class="disabled"><a href="#">首页</a></li>
        <li class="disabled"><a href="#">上一页</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">下一页</a></li>
        <li class="disabled"><a href="#">末页</a></li>
      </ul>
    </nav>
  </div>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<!--bootstrap-table核心js-->
<script src="/bootstrap-table/bootstrap-table.js"></script>
<!--bootstrap-table中文语言包-->
<script src="/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
</body>
</html>